<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            box-sizing: border-box;
        }

        svg {
            color: inherit;
            width: 1em;
            height: 1em;
            fill: currentColor
        }
    </style>
    <script async type="module" src="./src/main.js"></script>
</head>

<body>
    <div class="annieditor">
        <div class="annieditor-hds">
            <!-- <div class="annieditor-hd" data-mark-type="font_bold">
                <div>
                    <span>段落</span>
                    <svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 512 512">
                        <path fill="currentColor"
                            d="M239 401c9.4 9.4 24.6 9.4 33.9 0L465 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-175 175L81 175c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9L239 401z">
                        </path>
                    </svg>
                </div>

                <div class="mark-type-cells">
                    <div>
                        <span>段落文本</span>
                    </div>
                    <div>
                        <span>标题1</span>
                        <span>#</span>
                    </div>
                    <div>
                        <span>标题2</span>
                        <span>#</span>
                    </div>
                    <div>
                        <span>标题3</span>
                        <span>#</span>
                    </div>
                    <div>
                        <span>标题4</span>
                        <span>#</span>
                    </div>
                    <div>
                        <span>
                            <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="list-ol"
                                class="svg-inline--fa fa-list-ol fa-fw " role="img" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 512 512">
                                <path fill="currentColor"
                                    d="M24 56c0-13.3 10.7-24 24-24H80c13.3 0 24 10.7 24 24V176h16c13.3 0 24 10.7 24 24s-10.7 24-24 24H40c-13.3 0-24-10.7-24-24s10.7-24 24-24H56V80H48C34.7 80 24 69.3 24 56zM86.7 341.2c-6.5-7.4-18.3-6.9-24 1.2L51.5 357.9c-7.7 10.8-22.7 13.3-33.5 5.6s-13.3-22.7-5.6-33.5l11.1-15.6c23.7-33.2 72.3-35.6 99.2-4.9c21.3 24.4 20.8 60.9-1.1 84.7L86.8 432H120c13.3 0 24 10.7 24 24s-10.7 24-24 24H32c-9.5 0-18.2-5.6-22-14.4s-2.1-18.9 4.3-25.9l72-78c5.3-5.8 5.4-14.6 .3-20.5zM216 72H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 160H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 160H488c13.3 0 24 10.7 24 24s-10.7 24-24 24H216c-13.3 0-24-10.7-24-24s10.7-24 24-24z">
                                </path>
                            </svg>
                            有序列表
                        </span>
                        <span>1.</span>
                    </div>

                    <div>
                        <span>
                            <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="list-ul"
                                class="svg-inline--fa fa-list-ul fa-fw " role="img" xmlns="http://www.w3.org/2000/svg"
                                viewBox="0 0 512 512">
                                <path fill="currentColor"
                                    d="M64 64a32 32 0 1 0 0 64 32 32 0 1 0 0-64zm120 8c-13.3 0-24 10.7-24 24s10.7 24 24 24H488c13.3 0 24-10.7 24-24s-10.7-24-24-24H184zm0 160c-13.3 0-24 10.7-24 24s10.7 24 24 24H488c13.3 0 24-10.7 24-24s-10.7-24-24-24H184zm0 160c-13.3 0-24 10.7-24 24s10.7 24 24 24H488c13.3 0 24-10.7 24-24s-10.7-24-24-24H184zM96 256a32 32 0 1 0 -64 0 32 32 0 1 0 64 0zM64 384a32 32 0 1 0 0 64 32 32 0 1 0 0-64z">
                                </path>
                            </svg>
                            无序列表
                        </span>
                        <span>1.</span>
                    </div>

                    <div>
                        <span>
                            <svg viewBox="0 0 14 14" width="1em" height="1em" focusable="false" aria-hidden="true"
                                class="chakra-menu__icon">
                                <polygon fill="currentColor"
                                    points="5.5 11.9993304 14 3.49933039 12.5 2 5.5 8.99933039 1.5 4.9968652 0 6.49933039">
                                </polygon>
                            </svg>
                            代办事项
                        </span>
                        <span>[]</span>
                    </div>
                </div>
            </div> -->

            <div class="annieditor-hd" data-mark-type="font_color">
                <div class="mark-item">
                    <svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 448 512">
                        <path fill="currentColor"
                            d="M254 52.8C249.3 40.3 237.3 32 224 32s-25.3 8.3-30 20.8L57.8 416H32c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32h-1.8l18-48H303.8l18 48H320c-17.7 0-32 14.3-32 32s14.3 32 32 32h96c17.7 0 32-14.3 32-32s-14.3-32-32-32H390.2L254 52.8zM279.8 304H168.2L224 155.1 279.8 304z">
                        </path>
                    </svg>
                    <div class="mark-item-case"></div>
                </div>

                <div class="mark-down">
                    <svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 512 512">
                        <path fill="currentColor"
                            d="M239 401c9.4 9.4 24.6 9.4 33.9 0L465 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-175 175L81 175c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9L239 401z">
                        </path>
                    </svg>
                </div>

                <!-- <div class="mark-tooltip">字体颜色</div> -->
                <div></div>
            </div>

            <div class="annieditor-hd" data-mark-type="font_bold">
                <div class="mark-item">
                    <svg focusable="false" role="img" xmlns="http://www.w3.org/2000/svg"
                        viewBox="0 0 384 512">
                        <path fill="currentColor"
                            d="M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z">
                        </path>
                    </svg>
                </div>

                <div class="mark-tooltip">
                    加粗
                    <span class="mark-hotkeys">Ctrl+B</span>
                </div>
            </div>
        </div>
        <div class="annieditor-bd" contenteditable="true">

        </div>
    </div>
</body>

</html>